<template>
  <div class="course-center">
    <!-- 页面标题 -->
    <div class="page-header">
      <h1>课程中心</h1>
    </div>

    <!-- 选项卡 -->
    <div class="tabs-container">
      <el-tabs v-model="activeTab" class="center-tabs">
        <el-tab-pane label="我的课表" name="schedule">
          <ScheduleTable />
        </el-tab-pane>

        <el-tab-pane label="主题教育" name="education">
          <ThemeEducation />
        </el-tab-pane>

        <el-tab-pane label="课程资源" name="resources">
          <CourseResources />
        </el-tab-pane>

        <el-tab-pane label="课程实录回放" name="recordings">
          <CourseRecordings />
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, watch } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import ScheduleTable from './components/ScheduleTable.vue';
import ThemeEducation from './components/ThemeEducation.vue';
import CourseResources from './components/CourseResources.vue';
import CourseRecordings from './components/CourseRecordings.vue';

const route = useRoute();
const router = useRouter();
const activeTab = ref('schedule');

// 从URL参数获取tab值
const getTabFromQuery = () => {
  const tab = route.query.tab;
  // 只设置有效的tab值
  const validTabs = ['schedule', 'education', 'resources', 'recordings'];
  if (tab && validTabs.includes(tab)) {
    return tab;
  }
  return 'schedule'; // 默认值
};

// 初始化时设置activeTab
onMounted(() => {
  activeTab.value = getTabFromQuery();
});

// 监听activeTab变化，更新URL参数
watch(activeTab, (newTab) => {
  router.replace({
    query: {
      ...route.query,
      tab: newTab
    }
  });
});

// 监听路由变化，同步activeTab
watch(() => route.query.tab, (newTab) => {
  if (newTab) {
    const validTabs = ['schedule', 'education', 'resources', 'recordings'];
    if (validTabs.includes(newTab)) {
      activeTab.value = newTab;
    }
  }
});
</script>

<style scoped>
.course-center {
  padding: 20px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.page-header {
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid #ebeef5;
}

.page-header h1 {
  font-size: 24px;
  color: #303133;
  margin: 0;
}

.tabs-container {
  margin-top: 20px;
}

.center-tabs {
  :deep(.el-tabs__nav-wrap) {
    padding: 0 20px;
  }

  :deep(.el-tabs__item) {
    font-size: 16px;
    height: 50px;
    line-height: 50px;
  }

  :deep(.el-tabs__active-bar) {
    height: 3px;
  }
}


.tab-content h3 {
  margin-top: 0;
  color: #303133;
}

.tab-content p {
  color: #606266;
}
</style>
